<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="handCancel"
    :title="$t('goodsList.removalDialog.下架商品')"
    width="500"
  >
    <div class="p-20">
      <p>{{ $t("goodsList.removalDialog.确定要下架该商品吗") }}</p>
      <p class="text-gray-500 mt-10">
        {{ $t("goodsList.removalDialog.下架后商品将不会在商城展示") }}
      </p>
      <el-select v-model="reasonId" class="mt20" :placeholder="$t('goodsList.removalDialog.请选择下架原因')">
        <el-option
          v-for="item in reasonList"
          :key="item.id"
          :label="item['name' + locale]"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();
const show = defineModel();
const emit = defineEmits(["success"]);
const props = defineProps({
  ids: {
    type: Array,
    default: () => ([]),
  },
});
const reasonList = ref([]);
const reasonId = ref("")
const getReasonList = () => {
  Api.reasonList({ type: 1, page: 0, size: 9999 }).then((res) => {
    reasonList.value = res.data?.content || [];
  });
};

const handleSubmit = async () => {
  try {
    Api.sku_off({
      ids: props.ids || [],
      offReasonId: reasonId.value
    }).then((res) => {
      if (res.status === 200) {
        ElMessage.success(t('goodsList.goodsList.下架成功'));
        emit("success");
        handCancel();
      }
    });
  } catch (error) {
    ElMessage.error(t("goodsList.removalDialog.下架失败"));
    console.error(error);
  }
};

const handCancel = () => {
  show.value = false;
  reasonId.value = "";
};

onMounted(() => {
  getReasonList();
});
</script>

<style scoped>
.p-20 {
  padding: 20px;
}
.mt-10 {
  margin-top: 10px;
}
.text-gray-500 {
  color: #6b7280;
}
</style>
